<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 45 44"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><g clip-path="url(#12af9f__a)" fill="#002F5C"><path d="M44.139 0a27.5 27.5 0 0 0-19.64 8.25h-5.27a7.562 7.562 0 0 0-7.562 7.563V22h5.5l5.5 5.5V33h6.187a7.563 7.563 0 0 0 7.563-7.563V20.17A27.5 27.5 0 0 0 44.667.528V0h-.528ZM18.377 17.875a27.5 27.5 0 0 1 2.79-5.5H19.23a3.439 3.439 0 0 0-3.437 3.438v2.062h2.585Zm8.415 11V26.29a27.5 27.5 0 0 0 5.5-2.791v1.939a3.439 3.439 0 0 1-3.438 3.437h-2.062Zm13.42-24.42a23.375 23.375 0 0 0-18.453 16.302l2.15 2.153A23.376 23.376 0 0 0 40.213 4.458v-.003ZM8.312 28.27a2.062 2.062 0 1 0-2.915-2.915L1.272 29.48a2.062 2.062 0 1 0 2.915 2.915l4.125-4.125Zm8.25 2.75a2.062 2.062 0 1 0-2.915-2.915L1.272 40.48a2.062 2.062 0 1 0 2.915 2.915L16.562 31.02Zm2.75 5.335a2.063 2.063 0 0 1 0 2.915l-4.125 4.125a2.062 2.062 0 0 1-2.915-2.915l4.125-4.125a2.063 2.063 0 0 1 2.915 0Z" clip-rule="evenodd" fill-rule="evenodd"/><path d="M42 37.5a4.5 4.5 0 1 1-2.638-4.097L37.5 37.5H42Z"/></g><defs><clipPath id="12af9f__a"><path transform="translate(.667)" fill="#fff" d="M0 0h44v44H0z"/></clipPath></defs></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class FrameDndheoc2 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
